<template>
	<view class="st-navigation" :style="{ height: navBarHeight + 'px', backgroundColor }">
		<view class="st-navigation-bar"
			:style="{ height: (navBarHeight+1) + 'px', 'padding-top': top + 'px', backgroundColor }">
			<view class="st-navigation-bar-content">
				<slot name="content">
					<view style="display: flex;align-items: center;" @click="toBack">
						<uni-icons type="back" size="24"></uni-icons>
						<text class="title">{{ title }}</text>
					</view>
					<text v-if="subtitle" class="subtitle">{{ subtitle }}</text>

					<!-- <view class="st-navigation-bar-left">
            <slot name="left">
              <uni-icons type="back" size="24" @click="toBack"></uni-icons>
            </slot>
          </view>
          <view class="st-navigation-bar-center">
            <slot name="center"></slot>
          </view> -->
				</slot>
			</view>
			<view class="st-navigation-bar-right">
				<slot name="right"></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'st-navigation',
		props: {
			goHome: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: ''
			},
			subtitle: {
				type: [String, Number],
				default: ''
			},
			backgroundColor: {
				type: String,
				default: '#fff'
			}
		},
		data() {
			return {
				navBarHeight: 44,
				windowWidth: 0,
				top: 0,
			}
		},
		mounted() {
			this.computedSize();
		},
		methods: {



			computedSize() {
				// #ifndef H5 || APP-PLUS || MP-ALIPAY
				// 获取胶囊位置,API getMenuButtonBoundingClientRect 只有在微信小程序运行的时候才会生效，H5端查看会报错
				const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				this.navBarHeight = menuButtonInfo.top + menuButtonInfo.height + 8;
				this.top = menuButtonInfo.top + (menuButtonInfo.height - 32) / 2;
				this.windowWidth = menuButtonInfo.left
				// #endif

				// #ifdef H5 || APP-PLUS || MP-ALIPAY
				this.navBarHeight = 44
				this.windowWidth = 0
				// #endif


				this.$emit('computedSize', {
					navBarHeight: this.navBarHeight,
					windowWidth: this.windowWidth,
					top: this.top
				});
			},
			toBack() {
				if (this.goHome) {
					uni.switchTab({
						url: '/pages/ysmHome/ysmHome'
					})
				} else {
					if (getCurrentPages().length > 1) {
						uni.navigateBack()
					} else {
						uni.switchTab({
							url: '/pages/ysmHome/ysmHome'
						})
					}
				}
			}
		}
	}
</script>
<style lang="less" scoped>
	.st-navigation {
		.st-navigation-bar {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			padding: 0 16rpx;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 999;
			// box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);

			.st-navigation-bar-content {
				width: calc(100% - 100rpx);
				height: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-start;

				.title {
					font-weight: 600;
					font-size: 32rpx;
					line-height: 44rpx;
					color: #333333;
				}

				.subtitle {
					font-size: 24rpx;
					color: #999;
					margin-left: 20rpx;
					margin-top: 6rpx;
				}
			}

			.st-navigation-bar-left {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-start;
				width: 100rpx;
				height: 100%;

				.st-navigation-bar-left-icon {
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;
				}
			}

			.st-navigation-bar-center {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				flex: 1;
				height: 100%;

				.st-navigation-bar-center-title {
					font-size: 32rpx;
					color: #333;
					font-weight: 400;
				}
			}

			.st-navigation-bar-right {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-end;
				width: 100rpx;
				height: 100%;

				.st-navigation-bar-right-icon {
					width: 32rpx;
					height: 32rpx;
					margin-left: 8rpx;
				}
			}
		}
	}
</style>